<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <title>用户登陆</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <!-- Meta tag Keywords -->
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <!-- css files -->
    <link rel="stylesheet" href="../css/style_01.css" type="text/css" media="all"/>
    <!-- Style-CSS -->
    <link rel="stylesheet" href="../css/fontawesome-all.css">
    <!-- Font-Awesome-Icons-CSS -->
    <!-- //css files -->
    <!-- web-fonts -->
    <!-- <link href="http://maxcdn.bootstrapcdn.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i"
           rel="stylesheet">
     <link href="http://maxcdn.bootstrapcdn.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
           rel="stylesheet">-->
    <!-- //web-fonts -->
</head>

<body>
<!-- bg effect -->
<div id="bg">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
</div>
<!-- //bg effect -->
<!-- title -->
<h1>传智健康后台登陆</h1>
<!-- //title -->
<!-- content -->
<div class="sub-main-w3" id="app">
    <form >
        <h2>用户登陆
            <i class="fas fa-level-down-alt"></i>
        </h2>
        <div class="form-style-agile">
            <label>
                <i class="fas fa-user"></i>
                用户名
            </label>
            <input v-model="loginInfo.name" placeholder="请输入账号" name="Name" type="text" required="">
        </div>
        <div class="form-style-agile">
            <label>
                <i class="fas fa-unlock-alt"></i>
                密码
            </label>
            <input v-model="loginInfo.password" placeholder="请输入密码" name="Password" type="password" required="">
        </div>
        <!-- checkbox -->
        <div class="wthree-text">
            <ul>
                <li>
                    <a href="#" onclick="alert('请联系管理员:110')">忘记密码?</a>
                </li>
            </ul>
        </div>
        <div>
            <button v-on:click="login()">登录</button>
        </div>
    </form>

</div>
<!-- Jquery -->
<script src="../js/jquery.min.js"></script>
<!-- //Jquery -->

<!-- effect js -->
<script src="../js/canva_moving_effect.js"></script>
<!-- //effect js -->

</body>

<script>
    var vue = new Vue({
        el:'#app',
        data: {
            loginInfo: {}//登录信息
        },
        methods: {
            //登陆
            login() {
                axios.post("/system/login.do", this.loginInfo).then((res) => {
                    if (res.data.flag) {
                       alert("登陆成功");
                    } else {
                        alert("账号或密码错误");
                    }
                })
            },
        }

    });
</script>
</html>